<template>
  <div class="member-interest-page xtx-center-interest">
    <p class="tip">建议多选几个感兴趣的分类，我们会更精准的推荐相关商品哦！</p>
    <ul class="list">
      <li v-for="item in interest" :key="item.id">
        <div class="img">
          <img :src="item.url" alt />
        </div>
        <div class="chk">
          <xtx-checkbox v-model="item.check">{{item.name}}</xtx-checkbox>
        </div>
        <div class="selected" v-if="item.check">
          <span class="iconfont icon-queren"></span>
        </div>
      </li>
    </ul>
    <div class="btn">
      <a @click="save()" class="xtx-save-btn" href="javascript:;">保存</a>
    </div>
  </div>
</template>

<script>
export default {
  name: 'member-interest-page',
  created () {
    this.getInterest()
  },
  data () {
    return {
      interest: []
    }
  },
  methods: {
    async getInterest () {
      const { data } = await this.$http.get('member/profile/interest')
      this.interest = data.result
    },
    async save () {
      const ids = []
      this.interest.forEach(item => {
        if (item.check) {
          ids.push(item.id)
        }
      })
      await this.$http.put('member/profile/interest', ids)
      this.$message({ message: '保存个人兴趣分类成功', type: 'success' })
    }
  }
}
</script>

<style scoped lang='less'>
@import "./styles/interest.less";
</style>
